<template>
  <div class="content">
    <template v-if="way === 'post'">
      <el-button @click="saveResult" v-show="status" class="btn" type="primary" round>保存</el-button>
      <el-button @click="toEdit" v-show="!status" class="btn" type="success" round>编辑</el-button>
    </template>
    <v-title title="计划" :isShow="false"></v-title>

    <div class="table">
      <template v-for="(table, index) in tableArray">
        
        <el-divider :key="'divider' + index" content-position="left">{{ title1[index] }}</el-divider>
        <el-table
          class="marT"
          
          :key="'table' + index"
          :border="true"
          :header-cell-style="{background:'rgb(48, 65, 86)'}"
          :data="tables[table]"                      
          style="width: 100%"
          >
          <el-table-column
            v-for="column in Object.keys(tables[table][0])"
            :key="tables[table][0][column].label"
            :label="tables[table][0][column].label"
            align="center"
            prop="name"
          > 
            <template slot-scope="scope">              
              <template v-if="way === 'get'">
                <div>     
                  <span v-if="tables[table][0][column].value">{{ tables[table][0][column].value }}</span>
                  <span v-else>—</span>
                </div>         
              </template>

              <template v-else>
                <div v-if="scope.row[column].is_disabled">
                  <span>{{ scope.row[column].value }}</span>
                </div>
                <div v-else>
                  <el-input v-if="status" v-model="scope.row[column].value" placeholder="请输入内容"></el-input>
                  <template v-else>
                    <span v-if="scope.row[column].value">{{ scope.row[column].value }}</span>
                    <span v-else>—</span>
                  </template>
                </div>
              </template>
            </template>  
          </el-table-column>       
        </el-table>  
      </template>   
    </div>

    <v-title title="执行" :isShow="false"></v-title>

    <div class="table">
      <template v-for="(table, index) in tableArray3">
        <el-divider :key="'divider2' + index" content-position="left">{{ title2[index] }}</el-divider>
    
        <el-table
          class="marT"          
          :key="'table' + index"
          :border="true"
          :header-cell-style="{background:'rgb(48, 65, 86)'}"
          :data="tables3[table]"                      
          style="width: 100%"
          >
          <el-table-column
            v-for="column in Object.keys(tables3[table][0])"
            :key="tables3[table][0][column].label"
            :label="tables3[table][0][column].label"
            align="center"
            prop="name"
          >       
            <template slot-scope="scope">
              <template v-if="way === 'get'">
                <div>
                  <span v-if="scope.row[column].value">{{ scope.row[column].value }}</span>
                  <span v-else>—</span>              
                </div>            
              </template>

              <template v-else>
                <div v-if="scope.row[column].is_disabled">
                  <span>{{ scope.row[column].value }}</span>
                </div>
                <div v-else>
                  <el-input v-if="status" v-model="scope.row[column].value" placeholder="请输入内容"></el-input>
                  <template v-else>
                    <span v-if="scope.row[column].value">{{ scope.row[column].value }}</span>
                    <span v-else>—</span>
                  </template>
                </div>
              </template>
            </template>
          </el-table-column>       
        </el-table> 
      </template> 
    </div>

    <v-title title="交付" :isShow="false"></v-title>

    <div class="table">
      <template v-for="(table, index) in tableArray2">
        <el-divider :key="'divider3' + index" content-position="left">{{ title3[index] }}</el-divider>

        <el-table
          class="marT"          
          :key="'table' + index"
          :border="true"
          :header-cell-style="{background:'rgb(48, 65, 86)'}"
          :data="tables2[table]"                      
          style="width: 100%"
          >
          <el-table-column
            v-for="column in Object.keys(tables2[table][0])"
            :key="tables2[table][0][column].label"
            :label="tables2[table][0][column].label"
            align="center"
            prop="name"
          >       
            <template slot-scope="scope">
              <template v-if="way === 'get'">
                <div>
                  <span v-if="scope.row[column].value">{{ scope.row[column].value }}</span>
                  <span v-else>—</span>
                </div>           
              </template>

              <template v-else>
                <div v-if="scope.row[column].is_disabled">
                  <span>{{ scope.row[column].value }}</span>
                </div>
                <div v-else>
                  <el-input v-if="status" v-model="scope.row[column].value" placeholder="请输入内容"></el-input>
                  <template v-else>
                    <span v-if="scope.row[column].value">{{ scope.row[column].value }}</span>
                    <span v-else>—</span>
                  </template>
                </div>
              </template>
            </template>
          </el-table-column>       
        </el-table>  
      </template>   
    </div>
  </div>
</template>

<script>
  import VTitle from './title'
  import http from '@/views/sys/axios' 
  import { mapState } from 'vuex'

  export default {
    name: 'Content',
    components: {
      VTitle
    },
    // inject: ['data'],
    computed: {
      ...mapState({
        condition: state => state.conditions.condition
      }),
      tables() {
        let tableList = {}
        if(this.data) {
          Object.keys(this.data).forEach(item => {
            if(item ==='project_info' || item ==='requirement' || item === 'case') {
              tableList[item] = this.data[item]
            } 
          })
        }
        return tableList
      },
      tables2() {
        let tableList = {}
        if(this.data) {
          Object.keys(this.data).forEach(item => {
            if(item ==='deliverable' || item ==='template' || item === 'flow') {
              tableList[item] = this.data[item]
            } 
          })
        }
        return tableList
      },
      tables3() {
        let tableList = {}
        if(this.data) {
          Object.keys(this.data).forEach(item => {
            if(item !=='project_info' && item !=='requirement' && item !== 'case' && item !=='deliverable' && item !=='template' && item !== 'flow') {
              tableList[item] = this.data[item]
            } 
          })
        }
        return tableList
      },
      tableArray() {
        return Object.keys(this.tables)
      },
      tableArray2() {
        return Object.keys(this.tables2)
      },
      tableArray3() {
        return Object.keys(this.tables3)
      }
    },
    props: {
      way: String,
      data: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        status: false,        
        title1: ['项目信息', '需求', '用例'],
        title2: ['执行', '测试仪器', '辅助工具', '客户反馈', '内部反馈', '投入', '缺陷'],
        title3: ['交付物', '模版更新', '流程更新']
      }
    },
    created() {
    },
    methods: {  
      toEdit() {
        this.status = true
      },
      save() {
        let data = {
          ...this.tables,
          ...this.tables2,
          ...this.tables3
        }
        return http.post(`${process.env.VUE_APP_KANBAN_HOST}/api/data_summary/test_replay/entry?projectId=${this.condition.projectId}`, data)
      }, 
      async saveResult() {
        const { code, msg } = await this.save()
        try {
          if(code === 200) {
            this.$message({
              message: '录入成功',
              type: 'success'
            });
            this.status = false
          }
        } catch(err) {
          this.$message({
            message: '录入失败，请重新录入!',
            type: 'error'
          });
          this.status = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-table thead{
    color: #fff;
  }
  .btn{
    position: absolute;
    right: 50px;
    margin-top: 10px;
    z-index: 99;
  }
  .table{  
    .marT{
      margin-top: 10px;
    }
  }
  /deep/ .el-divider__text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    background-color: #e6a23c;
    padding: 6px 16px;
  }
  /deep/ .el-divider--horizontal {
    margin: 40px 0;
    height: 2px;
  }
</style>